<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>版块</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/public.css" rel="stylesheet" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			.mui-segmented-control-inverted {
				background: #FFF !important;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				color: #333 !important;
				font-weight: bold;
			}
			
			.mui-control-item {
				padding-left: 10px !important;
				padding-right: 10px !important;
			}
			
			.hx-box {
				position: fixed;
				z-index: 99;
				top: 44px;
				height: 38px !important;
			}
			.sx-box{
				margin-top: 82px;
			}
			.list-img{
				width: 144px !important;
				max-width: 144px !important;
				height: 90px !important;
				line-height: 90px !important;
			}
			.mui-table-view-cell:after{
				background: #FFF;
			}
			.mui-ellipsis-title{
				font-size: 16px;
				font-weight: bold;
				color: #333;
				margin-bottom: 5px !important;
			}
			.mui-ellipsis-num{
				display: inline-block;
				margin-top: 12px;
				padding: 5px;
				border-radius: 3px;
				font-size: 14px;
				color: #666;
				background: #f4f4f4;
			}
			* {
				touch-action: pan-y;
			} //解决点击横向滑动的报错问题
		</style>
	</head>

	<body>
		
		<div class="mui-content" id="app">
			<!--
            	作者：2184291781@qq.com
            	时间：2019-03-17
            	描述：头部
            -->
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title" v-text="title"></h1>
			</header>
			<!--
            	作者：2184291781@qq.com
            	时间：2019-03-17
            	描述：横向可滚动切换选项列表
            -->
			<div class="hx-box">
				<div style="border-bottom: 1px solid #eee;" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll mui-scroll-h">
						<a class="mui-control-item  mui-active">
							推荐
						</a>
						<a class="mui-control-item">
							HTML/CSS
						</a>
						<a class="mui-control-item">
							Javascript
						</a>
						<a class="mui-control-item">
							Vue.js
						</a>
						<a class="mui-control-item">
							React.js
						</a>
						<a class="mui-control-item">
							微信小程序
						</a>
					</div>
				</div>
			</div>
			<!--
            	作者：2184291781@qq.com
            	时间：2019-03-17
            	描述：横向可滚动切换选项列表
            -->
            <div class="sx-box">
            	<!--列表信息流 开始-->
				<div id="list" class="">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell mui-media">
								<a href="javascript:;"  @tap="jumpUrl()">
									<img class="mui-media-object mui-pull-left list-img" src="https://edu-image.nosdn.127.net/9F8B687847C17FCDF0DA694DD9C5817F.jpg?imageView&quality=100&thumbnail=288y180">
									<div class="mui-media-body">
										<p class="mui-ellipsis mui-ellipsis-title">数据分析师(Python)</p>
										<p class="mui-ellipsis">零基础迅速提高零基础迅速提高</p>
										
										<span class="mui-ellipsis mui-ellipsis-num">共12节课</span>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a href="javascript:;"  >
									<img class="mui-media-object mui-pull-left list-img" src="https://edu-image.nosdn.127.net/9F8B687847C17FCDF0DA694DD9C5817F.jpg?imageView&quality=100&thumbnail=288y180">
									<div class="mui-media-body">
										<p class="mui-ellipsis mui-ellipsis-title">数据分析师(Python)</p>
										<p class="mui-ellipsis">零基础迅速提高零基础迅速提高</p>
										
										<span class="mui-ellipsis mui-ellipsis-num">共12节课</span>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a href="javascript:;"  >
									<img class="mui-media-object mui-pull-left list-img" src="https://edu-image.nosdn.127.net/9F8B687847C17FCDF0DA694DD9C5817F.jpg?imageView&quality=100&thumbnail=288y180">
									<div class="mui-media-body">
										<p class="mui-ellipsis mui-ellipsis-title">数据分析师(Python)</p>
										<p class="mui-ellipsis">零基础迅速提高零基础迅速提高</p>
										
										<span class="mui-ellipsis mui-ellipsis-num">共12节课</span>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a href="javascript:;"  >
									<img class="mui-media-object mui-pull-left list-img" src="https://edu-image.nosdn.127.net/9F8B687847C17FCDF0DA694DD9C5817F.jpg?imageView&quality=100&thumbnail=288y180">
									<div class="mui-media-body">
										<p class="mui-ellipsis mui-ellipsis-title">数据分析师(Python)</p>
										<p class="mui-ellipsis">零基础迅速提高零基础迅速提高</p>
										
										<span class="mui-ellipsis mui-ellipsis-num">共12节课</span>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a href="javascript:;"  >
									<img class="mui-media-object mui-pull-left list-img" src="https://edu-image.nosdn.127.net/9F8B687847C17FCDF0DA694DD9C5817F.jpg?imageView&quality=100&thumbnail=288y180">
									<div class="mui-media-body">
										<p class="mui-ellipsis mui-ellipsis-title">数据分析师(Python)</p>
										<p class="mui-ellipsis">零基础迅速提高零基础迅速提高</p>
										
										<span class="mui-ellipsis mui-ellipsis-num">共12节课</span>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a href="javascript:;"  >
									<img class="mui-media-object mui-pull-left list-img" src="https://edu-image.nosdn.127.net/9F8B687847C17FCDF0DA694DD9C5817F.jpg?imageView&quality=100&thumbnail=288y180">
									<div class="mui-media-body">
										<p class="mui-ellipsis mui-ellipsis-title">数据分析师(Python)</p>
										<p class="mui-ellipsis">零基础迅速提高零基础迅速提高</p>
										
										<span class="mui-ellipsis mui-ellipsis-num">共12节课</span>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a href="javascript:;"  >
									<img class="mui-media-object mui-pull-left list-img" src="https://edu-image.nosdn.127.net/9F8B687847C17FCDF0DA694DD9C5817F.jpg?imageView&quality=100&thumbnail=288y180">
									<div class="mui-media-body">
										<p class="mui-ellipsis mui-ellipsis-title">数据分析师(Python)</p>
										<p class="mui-ellipsis">零基础迅速提高零基础迅速提高</p>
										
										<span class="mui-ellipsis mui-ellipsis-num">共12节课</span>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a href="javascript:;"  >
									<img class="mui-media-object mui-pull-left list-img" src="https://edu-image.nosdn.127.net/9F8B687847C17FCDF0DA694DD9C5817F.jpg?imageView&quality=100&thumbnail=288y180">
									<div class="mui-media-body">
										<p class="mui-ellipsis mui-ellipsis-title">数据分析师(Python)</p>
										<p class="mui-ellipsis">零基础迅速提高零基础迅速提高</p>
										
										<span class="mui-ellipsis mui-ellipsis-num">共12节课</span>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a href="javascript:;"  >
									<img class="mui-media-object mui-pull-left list-img" src="https://edu-image.nosdn.127.net/9F8B687847C17FCDF0DA694DD9C5817F.jpg?imageView&quality=100&thumbnail=288y180">
									<div class="mui-media-body">
										<p class="mui-ellipsis mui-ellipsis-title">数据分析师(Python)</p>
										<p class="mui-ellipsis">零基础迅速提高零基础迅速提高</p>
										
										<span class="mui-ellipsis mui-ellipsis-num">共12节课</span>
									</div>
								</a>
							</li>
	
						</ul>
					</div>
				</div>
				<!--列表信息流 结束-->
            </div>

		</div>
		<!--引入公用脚本文件开始-->
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/public.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/tools.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<!--引入公用脚本文件结束-->

		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					title:''
				},
				created: function() {
					this.title=tools.getUrlParam("param");
				},
				mounted: function() {
					//mui初始化
					(function($) {

					})(mui);
				},
				methods:{
					jumpUrl:function(){
						tools.openPage("detail.html","detail.html");
					}
				}
			});
		</script>
	</body>

</html>